<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>小米商城登录与注册界面的设计与实现</title>
				<meta name="viewport" content="width=device-width, initial-scale=1.0">
				<script src="https://unpkg.com/vue@next"></script>
				<script src="js/prevent.js"></script>
				<link rel="stylesheet" href="css/style.css">
			</head>
			<body>
				
				<div class="root">
					<div class="login_interface">
						<div class="left"></div>
						<div class="right">
							<div class="header">
								<div class="h1">
									<img src="img/miLogo.png">
									<span>小米账号</span>
								</div>
								<div class="h2">
									<ul class="lists">
										<li><a href="">用户协议</a></li>
										<li><a href="">隐私政策</a></li>
										<li><a href="">帮助中心<span class="line"></span></a></li>
										<li>
											<a href="">中文(简体)<span class="tra"></span></a>
											<!-- <ul id="sub" >
												<li><a href="">中文(繁体)</a></li>
												<li><a href="">English</a></li>
											</ul> -->
										</li>
									</ul>
								</div>
							</div>
							<!-- content -->
								<div class="form_max">
									<div class="login_form">
										<div class="form_container" >
											<div class="form_header" >
												<span @click="tab1()"><a href="javascript:void(0)" :class="{active:ok}">登录</a></span>
												<span @click="tab2()"><a href="javascript:void(0)" :class="{active:no}">注册</a></span>
											</div>
											<form  id="form" v-show="ok" >
												<div class="input" >
													<div class="part" id="part">
														<input type="tel" id="selcet" required v-model="userInfo.phone">
														<label>邮箱/手机号/小米ID</label>
														<!-- <div class="l1 ls">请输入账号</div> -->
													</div>
													
													<div class="part" id="part1">
														<input type="password" id="passw" required v-model="userInfo.password" >
														<label>密码</label>
														<!-- <div class="l2 ls">请输入登录密码</div> -->
													</div>
													
												</div>
												<div class="agree">
													<input type="checkbox" required v-model="checked">
													<span>
														已阅读同意小米账号
														<a href="">用户协议</a>
														和
														<a href="">隐私政策</a>
													</span>
												</div>
												<button class="submit" type="submit"  @click.prevent="saveInfo()">登录</button>
												<div class="choose">
													<div class="des"><a href="">忘记密码?</a></div>
													<div class="other"><a href="">手机号登录</a></div>
												</div>
												<div class="otherWay">其他方式登录</div>
												<div class="icon">
													<div class="iconImg">
															<img src="img/zfb.png" alt="">
													</div>
													<div class="iconImg">
															<img src="img/wx.png" alt="">
													</div>
													<div class="iconImg">
															<img src="img/qq.png" alt="">
													</div>
													<div class="iconImg">
															<img src="img/wb.png" alt="">
													</div>
												</div>
											</form>
											<!-- 选项卡二 -->
											<form action="" id="form" v-show="no" >
												<div class="input2">
													<div class="part2" id="part2">
														<label style="font-size: 0.625rem;top: 0.6rem;">国家/地区</label>
														<select id="selectBox" style="font-size: 1.0625rem;" v-model="newUserInfo.nation">
															<!-- <option value="">中国</option>
															<option value="英国">英国</option>
															<option value="美国">美国</option> -->
															<option :value="item.country" v-for="item in message">{{item.country}}</option>
														</select>
													</div>
													
													<div class="part2">
														<input type="text" id="phone" required v-model="newUserInfo.tel"  >
														<label>国家码</label>
														<label style="top: 2rem;font-size: 1.0625rem;color: #aaa;">+{{numChange}}</label>
														<label style="top: 1rem;left: 6rem;font-size: 1.5rem;color: #aaa;transform: rotate(90deg);">></label>
														<label id="pho_trans">手机号</label>
														<!-- <div class="zc1">请输入手机号</div> -->
													</div>
													
													<div class="part2">
														<input type="text" id="yzm"  v-model="newUserInfo.test" required>
														<label>请输入验证码</label>
														
														<button  v-if="show == 0" @click.prevent="verify()">获取验证码</button>
														<button  v-if="show == 1" @click.prevent="verify()">已发送{{count}}s</button>
														<button  v-if="show == 2" @click.prevent="verify()">重新获取</button>
														<!-- <div class="zc1">请输入验证码</div> -->
													</div>										
												</div>
												<div class="agree">
													<input type="checkbox" required v-model="checked">
													<span>
														已阅读同意小米账号
														<a href="">用户协议</a>
														和
														<a href="">隐私政策</a>
													</span>
												</div>
												<button class="submit2" type="submit"  @click.prevent="saveNewInfo()">注册</button>
												<div class="choose">
													<div class="des"><a href="">忘记密码?</a></div>
													<div class="other"><a href="">手机号登录</a></div>
												</div>
												<div class="otherWay">其他方式登录</div>
												<div class="icon2">
													<div class="iconImg">
															<img src="img/zfb.png" alt="">
													</div>
													<div class="iconImg">
															<img src="img/wx.png" alt="">
													</div>
													<div class="iconImg">
															<img src="img/qq.png" alt="">
													</div>
													<div class="iconImg">
															<img src="img/wb.png" alt="">
													</div>
												</div>
											</form>
										
											<!-- 选项卡二 end-->
										</div>
									</div>
								</div>
							<!-- content end-->
							<!-- footer -->
							<div class="copyright">
								<a href="">
								小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
								</a>
							</div>
							<!-- footer end-->
						</div>
					</div>
				</div>
				
				<script src="js/fuben.js"></script>
			</body>
		</html>
	